<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
         <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String ctx = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>single</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
  <body >
        <div class="col-sm-3 col-md-2 sidebar">
			<div class="top-navigation">
				<div class="t-menu">MENU</div>
				<div class="t-img">
					<img src="images/lines.png" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
				<div class="drop-navigation drop-navigation">
				  <ul class="nav nav-sidebar">
					<li class="active"><a href="<%=ctx%>/user/toIndexView" class="home-icon"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li>
					<li><a href="<%=ctx%>/songList/selectSongListByType" class="user-icon"><span class="glyphicon glyphicon-home glyphicon-blackboard" aria-hidden="true"></span>歌单</a></li>
					<li><a href="history.jsp" class="sub-icon"><span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>音乐人</a></li>
					<li><a href="javascript:void(0);" class="menu1"><span class="glyphicon glyphicon-film" aria-hidden="true"></span>排行榜<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-2">
							<li><a href="<%=ctx%>/song/selectSongByCounts">热歌榜</a></li>                                             
							<li><a href="<%=ctx%>/song/selectSongByComment">热评榜</a></li>
							<li><a href="<%=ctx%>/song/selectSongByCreate">新歌榜</a></li> 
						</ul>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu1" ).click(function() {
							$( "ul.cl-effect-2" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="javascript:void(0);" class="menu"><span class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>分类听歌<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
						<ul class="cl-effect-1">
							<li><a href="<%=ctx%>/song/selectSongByType?type=1">说唱</a></li>                                             
							<li><a href="<%=ctx%>/song/selectSongByType?type=2">摇滚</a></li>
							<li><a href="<%=ctx%>/song/selectSongByType?type=3">流行</a></li> 
							<li><a href="<%=ctx%>/song/selectSongByType?type=4">民谣</a></li>  
						</ul>
						<!-- script-for-menu -->
						<script>
							$( "li a.menu" ).click(function() {
							$( "ul.cl-effect-1" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
					<li><a href="#" class="song-icon"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>Songs</a></li>
				  </ul>
				  <!-- script-for-menu -->
						<script>
							$( ".top-navigation" ).click(function() {
							$( ".drop-navigation" ).slideToggle( 300, function() {
							// Animation complete.
							});
							});
						</script>
				</div>				
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="show-top-grids">
				<div class="col-sm-8 single-left">
					
					
					
					<div class="all-comments">
						<div class="all-comments-buttons">
						<h2>单曲:${song.songName}</h2><br>
						<h4>歌手:${song.singer}</h4>
						<c:if test="${song.songId lt 44}">
						<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="${song.src}"></iframe>
						</c:if>
						<c:if test="${song.songId gt 44}">
						<EMBED height=45 type=audio/mpeg width=300 src="${song.src}" volume="0" loop="-1"></EMBED>
						</c:if>
						&emsp;&emsp;&emsp;<a href="<%=ctx%>/song/Comment?songId=${song.songId}&type=1">收藏</a>
						
						<table>
						<c:forEach items="${list}" var="list">
						<input type="hidden" id="songId" name="songId" value="${song.songId}">
						<tr><td>
							<div class="col-md-2 resent-grid recommended-grid show-video-grid">
								<div class="resent-grid-img recommended-grid-img">
									<img src="${list.imgpath}" alt="" height="50" width="50"/>
									</div>
								</div></td><td><a onclick="check()">${list.listName}</a></td>
								<td><input type="button" onclick="check(${list.listId})" value="收藏"></td>
						</tr></c:forEach>
						</table>
						
						<br><br><br><br><br><br><br><br><br><br>
							</div>
						<div class="media-grids">
						<c:forEach items="${comment}" var="comment">
							<div class="media">
								<div class="media-body">
									<p>${comment.content }</p>
									<span>${comment.realName } </a></span>
								</div>
							</div>
							 </c:forEach>
						
						</div>
						<div class="all-comments-info">
							<a >All Comments : ${counts}</a>
							<div class="box">
							<c:if test="${sessionScope.loginUser != null }">
								<form action="${pageContext.request.contextPath}/song/addComment" method="post">
								<input type="hidden" name="songId" value="${song.songId}" />
									<textarea placeholder="评论" name="content" id="content"></textarea>
									<input type="submit" value="发表">
								</form></c:if>
							</div>
							
						</div>
					</div>
				</div>
				
				
			<!-- footer -->
			
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
     <script type="text/javascript">
	function check(listId) {
		var songId = $("#songId").val();
		$.ajax({
					url : "${pageContext.request.contextPath}/songList/songIntoListCheck",
					data : {
						listId : listId,
						songId : songId
					},
					dataType : "json",
					success : function(data) {
						if(data.msg==1){
						window.location.href = "${pageContext.request.contextPath}/songList/songIntoList?listId="+listId+"&songId="+songId;
						}
						else{
							alert(data.msg)
						}
						}
				})
	}
</script>
  </body>
 
</html>